<template>
	<view class="content">
		<!--f1:两个下拉菜单/数据拾取器-->
		<view>
			<!--第一个数据拾取器:缴费类型-->
			<!--mode 选择器类型: 普通 多列 日期 时间 省市-->
			<!--range 选择器的选项: 配一个数组，只有普通 多列 两种选择器可以配置-->
			<picker class="picker" mode="selector" :range="feeTypes" @change="doFeeTypeChange">
				<view class="picker-content">
					<text class="txt">{{ curFeeType < 0 ? '选择类型' : feeTypes[curFeeType] }}</text>
					<uni-icons type="bottom"></uni-icons>
				</view>
			</picker>
			<!--第二个数据拾取器：缴费月份-->
			<!--mode 配置为 date,则为日期选择器-->
			<!--fields 控制日期选择器的粒度, day month year-->
			<picker class="picker" mode="date" fields="month" @change="doMonthChange">
				<view class="picker-content">
					<text class="txt">{{ curMonth }}</text>
					<uni-icons type="bottom"></uni-icons>
				</view>
			</picker>
		</view>
		<!--f2: 缴费记录/卡片-->
		<!--title: 标题-->
		<!--thumbnail: 缩略图-->
		<!--extra: 标题中的额外信息-->
		<uni-card
			v-for="record in records"
			:key="record.fid"
			class="record"
			padding="0"
			:title="record.type | feeTypeName"
			:thumbnail="record.type | feeTypeIcon"
			:extra="`￥${record.amount.toFixed(2)}`"
		>
			<uni-list class="recode-content">
				<uni-list-item title="缴费状态" rightText="交易成功"></uni-list-item>
				<uni-list-item title="缴费用户" :rightText="record.householdName"></uni-list-item>
				<uni-list-item title="缴费时间" :rightText="record.paidTime | dateToStr"></uni-list-item>
			</uni-list>
		</uni-card>
	</view>
</template>

<script>
import { feeRecord } from '@/service/index.js';
export default {
	data() {
		return {
			curFeeType: -1,
			curMonth: '选择月份',
			feeTypes: ['全部类型', '水费', '电费', '燃气费', '物业', '停车', '宽带'],
			records: []
		};
	},
	onLoad() {
		//用户新进入，查询数据
		this.requestFeeRecord();
	},
	methods: {
		//处理"缴费类型"拾取器发生改变的事件
		doFeeTypeChange(e) {
			//e.detal.value ->  1
			this.curFeeType = e.detail.value;
			this.requestFeeRecord();
		},
		//处理"缴费月份"拾取器发生改变的事件
		doMonthChange(e) {
			//e.detal.value ->  2023-03
			this.curMonth = e.detail.value;
			this.requestFeeRecord();
		},
		//获取缴费记录 - 刚进入页面时  用户修改类型时  用户修改时间时
		async requestFeeRecord() {
			let type = this.curFeeType;
			let startTime = 0;
			let endTime = 0;

			let arr = this.curMonth.split('-');
			if (arr.length == 2) {
				//选择了时间 需要将时间转换为月的起始和结束毫秒值
				startTime = new Date(this.curMonth).getTime() - 1000 * 60 * 60 * 8;
				endTime = new Date(arr[0], arr[1]).getTime() - 1;
			}

			let data = await feeRecord(type, startTime, endTime);
			this.records = data;
		}
	}
};
</script>

<style scoped lang="scss">
.picker {
	display: inline-block;
	width: $uni-font-size-base * 10;
	.picker-content {
		background-color: $uni-bg-color;
		align-items: center;
		border: $uni-border;
		border-radius: $uni-border-radius-base;
		margin: $uni-spacing-col-lg;
		padding: $uni-spacing-col-sm;
		.txt {
			flex: 1;
			text-align: center;
		}
	}
}

.record {
	flex-direction: column;
	::v-deep .uni-card__content {
		display: block;
	}
	.record-content {
		width: 100%;
	}
}
</style>
